<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增项目基础信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-projectBase-add">
            <h4 class="form-header h4">项目基础信息信息</h4>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">项目名称：</label>
                <div class="col-sm-8">
                    <input name="projectName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">项目经理：</label>
                <div class="col-sm-8">
                    <input name="projectManager" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">项目地点：</label>
                <div class="col-sm-8">
                    <input name="projectLocation" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">项目金额：</label>
                <div class="col-sm-8">
                    <input name="projectAmount" class="form-control" type="text" data-rule-number="true">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">项目类型：</label>
                <div class="col-sm-8">
                    <!--<input name="projectTypeId" class="form-control" type="text">-->
                    <select name="projectTypeId" class="form-control">
                        <option value="">--请选择--</option>
                        <option th:each="item:${typeList}"
                                th:value="${item.id}" th:text="${item.typeName}"
                                th:selected="*{projectTypeId}==${item.id}">
                        </option>
                    </select>
                </div>
            </div>
            <h4 class="form-header h4">活动信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addRow();refreshImgData();"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow();refreshImgData();"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/js/system/projectBase/projectBaseHandle.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "system/projectBase"
        $("#form-projectBase-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var formData = new FormData(); //$('#form-projectBase-edit')[0]
                $('#form-projectBase-add').serializeArray().forEach(function(item) {
                    formData.append(item.name, item.value);
                });
                var rows = $('#bootstrap-table').bootstrapTable('getData');
                rows.forEach((row, index) => {
                    if (row.coverFile) {
                        formData.append('cmsActivityList['+ index + '].coverFile', row.coverFile);
                    }
                    if (row.activityPictureFiles && row.activityPictureFiles.length > 0) {
                        row.activityPictureFiles.forEach(file => {
                            formData.append('cmsActivityList['+ index + '].activityPictureFiles', file);
                        });
                    }
                });
                $.operate.save(prefix + "/add", formData, null, {
                    contentType: false, // 不设置Content-Type头
                    processData: false, // 不处理数据
                });
            }
        }

        $(function() {
            var options = {
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: '',
                    width: 1,
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex;
                    }
                },
                {
                    field: 'activityName',
                    align: 'center',
                    title: '活动名称',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='cmsActivityList[%s].activityName' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'cover',
                    align: 'center',
                    title: '活动封面',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='hidden' name='cmsActivityList[%s].cover' value='%s'>", index, value);
                        var img = $.common.sprintf("<img id='cmsActivityList[%s].coverImg' src='%s' style='display:%s' onclick=\"clickInputFile(%s, 'coverFile')\" width='100' height='100'>",
                                index, value, value == '' ? 'none' : 'block', index)
                            // + $.common.sprintf("<a href='javascript:void(%s)' style='display:%s'><label for='cmsActivityList[%s].coverFile'>上传封面</label></a>", index, value == '' ? 'block' : 'none', index)
                            + $.common.sprintf("<input type='file' name='cmsActivityList[%s].coverFile' onchange=\"changePicture(%s, 'coverFile', 'coverImg')\" style='display:%s'>",
                                index, index, value == '' ? 'block' : 'none');
                        return html + img;
                    }
                },
                {
                    field: 'activitySummary',
                    align: 'center',
                    title: '活动小结',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='cmsActivityList[%s].activitySummary' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'activityPictures',
                    align: 'center',
                    title: '活动照片',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='hidden' name='cmsActivityList[%s].activityPictures' value='%s'>", index, value);
                        var topPic = value.split('|')[0];
                        var img = $.common.sprintf("<img id='cmsActivityList[%s].topPicture' src='%s' style='display:%s' onclick=\"clickInputFile(%s, 'activityPictureFiles')\" width='100' height='100'>",
                                index, topPic, topPic == '' ? 'none' : 'block', index)
                            + $.common.sprintf("<input type='file' name='cmsActivityList[%s].activityPictureFiles' onchange=\"changePicture(%s, 'activityPictureFiles', 'topPicture')\" style='display:%s' multiple >",
                                index, index, topPic == '' ? 'block' : 'none');
                        return html + img;
                    }
                },
                {
                    field: 'newsRelease',
                    align: 'center',
                    title: '新闻稿',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='cmsActivityList[%s].newsRelease' value='%s'>", index, value);
                        return html;
                    }
                },
                /*{
                    field: 'createTime',
                    align: 'center',
                    title: '创建时间',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='cmsActivityList[%s].createTime' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'createBy',
                    align: 'center',
                    title: '创建人',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='cmsActivityList[%s].createBy' value='%s'>", index, value);
                        return html;
                    }
                },*/
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\');refreshImgData();"><i class="fa fa-remove"></i>删除</a>';
                    }
                }]
            };
            $.table.init(options);
        });

        function addRow() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            var row = {
                index: $.table.serialNumber(count),
                activityName: "",
                cover: "",
                activitySummary: "",
                activityPictures: "",
                newsRelease: "",
                createTime: "",
                createBy: "",
            }
            sub.addRow(row);
        }
    </script>
</body>
</html>
